<template>
  <div class="school-manage">
    <Row class="search-area">
      <Col span="24">
        <Select v-model="searchVo.articleColumn" @on-change="searchByKeyWords" class="ml-5" style="width:200px;" placeholder="技艺类别">
          <Option v-for="(c,index) in classify" :value="c" :key="index">{{ c }}</Option>
        </Select>
        <Input v-model.trim="searchVo.keywords" :clearable="true" placeholder="关键字搜索" class="search-input"></Input>
        <Button type="info" icon="ios-search"  @click="searchByKeyWords()">搜索</Button>
        <Button type="success" icon="plus" @click="aeModal = true;editCard = '';">新增学生{{searchVo.articleColumn}}</Button>
      </Col>
    </Row>
    <Table size="small" :loading="bIsLoading" border ref="selection" :columns="columns" :data="tableData"></Table>
    <Row class="pagination">
      <Page :total="searchVo.total" show-total @on-change="pageNoChange"></Page>
    </Row>
    <Modal
      :title="'新增/编辑' + searchVo.articleColumn"
      width="1000px"
      class="add-column"
      v-model="aeModal"
      :mask-closable="false"
      :closable="false"
      :styles="{top: '20px'}">
      <ae-form ref="configRef" :currentClassify="searchVo.articleColumn" :target-data="editCard" :close-handle="updateHandle" v-if="aeModal"></ae-form>
      <div slot="footer" class="bottom-btn">
        <Button type="primary" @click="handleRoleSubmit()">确定提交</Button>
        <Button type="ghost" @click="closeModal()" style="margin-left: 8px">关闭(X)</Button>
      </div>
    </Modal>
  </div>
</template>
<script>
  import Vue from 'vue'
  import {SERVICE_URLS} from "../../libs/service.url";
  import AeForm from "./aeform";
  export default {
    components: {AeForm},
    data () {
      return {
        searchVo : {
          keywords : '',
          articleColumn: '书法',
          pageNo: 1,
          pageSize: 10,
          total : 0,
          currentPage : 1,
        },
        classify : [
          '书法',
          '绘画',
          '舞蹈',
          '作文'
        ],
        tableData : [],
        columns: [
          {
            title: '序号',
            width: 60,
            align: 'center',
            render: function (h, params) {
              return h('div',
                params.index + 1);
            }
          },
          {
            title: '活动标题',
            key: 'title',
            align: 'center',
          },
          {
            title: '创建人',
            key: 'creator',
            align: 'center',
          },
          {
            title: '创建时间',
            key: 'createTime',
            align: 'center',
          },
          {
            title: '操作',
            key: 'action',
            width: 150,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'ghost',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.viewPageConfig(params.row);
                    }
                  }
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'warning',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.deleteConfigById(params.row.id,params.row.title);
                    }
                  }
                }, '删除')
              ]);
            }
          }
        ],
        aeModal : false,
        editCard : '',
        bIsLoading : false,
      }
    },
    created(){
      this.fetchData();
    },
    computed:{
      currentUser () {
        return this.$store.getters.currentUser
      }
    },
    methods: {
      pageNoChange (num) {
        this.searchVo.pageNo = num;
        this.fetchData();
      },
      fetchData () {
        let self = this;
        Vue.submit(self,{
          url:SERVICE_URLS.research.page,
          params:self.searchVo,
          callback:(_data)=>{
            self.tableData=_data.data;
            self.searchVo.total = _data.allCount;
          }
        })
      },
      searchByKeyWords () {
        this.searchVo.pageSize = 10;
        this.searchVo.pageNo = 1;
        this.searchVo.total = 0;
        this.searchVo.currentPage = 1;
        this.fetchData();
      },
      deleteConfigById(id,name) {
        this.$Modal.confirm({
          title: '删除确认',
          content: `<p>确定要删除<span style="color: red;">${name}</span>吗？删除后不可恢复.</p>`,
          onOk: () => {
            let self = this;
            Vue.submit(self, {
              loading: 'loading',
              url: SERVICE_URLS.research.del,
              params: {
                id: id
              },
              callback: (_data) => {
                self.$Message.success('操作成功!');
                self.fetchData();
              }
            })
          },
          onCancel: () => {

          }
        });
      },
      viewPageConfig (data) {
        this.editCard = data;
        this.aeModal = true;
      },
      updateHandle () {
        this.closeModal();
        this.fetchData();
      },
      handleRoleSubmit(){
        this.$refs.configRef.handleSubmit();
      },
      handleReset () {
        this.$refs.configRef.handleReset();
      },
      closeModal () {
        this.handleReset();
        this.aeModal = false;
        this.editCard = null;
      },
    }
  }
</script>

<style scoped lang="scss">
  .school-manage {
    .search-area {
      margin-bottom: 10px;
      text-align: left;
    }
    .search-input {
      width: 200px;
    }
    .add-school-btn {
      text-align: right;
    }
  }
  .add-role-dialog {
    .bottom-btn {
      text-align: center
    }
  }
  .pagination {
    margin-top: 20px;
    text-align: center;
  }
  .add-auth-dialog {
    .auth-menu-tree {
      border-bottom: 1px solid #e9e9e9;
      padding-bottom:6px;
      margin-bottom:6px;
      &:last-child{
        border : none;
        padding-bottom:0px;
        margin-bottom:0px;
      }

    }
    .ivu-checkbox-wrapper {
      margin-bottom: 5px;
    }
  }
</style>
